<template>
  <div class="layout-pd">
    <el-card shadow="hover" header="表单表格验证">
      <el-form ref="tableRulesRef" :model="state.tableData" size="default">
        <el-table ref="tableRef" :data="state.tableData.data" border class="module-table-uncollected" max-height="200">
          <el-table-column
            v-for="(item, index) in state.tableData.header"
            :key="index"
            show-overflow-tooltip
            :prop="item.prop"
            :width="item.width"
            :label="item.label"
          >
            <template v-slot:header>
              <span v-if="item.isRequired" class="color-danger">*</span>
              <span class="pl5">{{ item.label }}</span>
              <el-tooltip v-if="item.isTooltip" effect="dark" content="这是tooltip" placement="top">
                <i class="iconfont icon-quanxian" />
              </el-tooltip>
            </template>
            <template v-slot="scope">
              <el-form-item
                :prop="`data.${scope.$index}.${item.prop}`"
                :rules="[{ required: item.isRequired, message: '不能为空', trigger: `${item.type}` == 'input' ? 'blur' : 'change' }]"
              >
                <el-select v-if="item.type === 'select'" v-model="scope.row[item.prop]" placeholder="请选择">
                  <el-option v-for="sel in state.tableData.option" :key="sel.value" :label="sel.label" :value="sel.value" />
                </el-select>
                <el-date-picker
                  v-else-if="item.type === 'date'"
                  v-model="scope.row[item.prop]"
                  type="date"
                  placeholder="选择日期"
                  style="width: 100%"
                />
                <el-input v-else-if="item.type === 'input'" v-model="scope.row[item.prop]" placeholder="请输入内容" />
                <el-input v-else-if="item.type === 'dialog'" v-model="scope.row[item.prop]" readonly placeholder="请输入内容">
                  <template v-slot:suffix>
                    <i class="iconfont icon-shouye_dongtaihui" />
                  </template>
                </el-input>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <el-row class="flex mt15">
        <div class="flex-margin">
          <el-button size="default" type="success" @click="onValidate(tableRulesRef)">表格验证</el-button>
          <el-button size="default" type="primary" @click="onAddRow">新增一行</el-button>
        </div>
      </el-row>
    </el-card>
  </div>
</template>

<script setup lang="ts" name="example/pagesTableRules">
import { reactive, ref, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance } from 'element-plus'

// 定义变量内容
const tableRulesRef = ref<FormInstance>()
const tableRef = ref()
const state = reactive<TableRulesState>({
  tableData: {
    data: [],
    header: [
      { prop: 'a1', width: '', label: '一级分类', isRequired: true, type: 'select' },
      { prop: 'a2', width: '', label: '二级分类', isRequired: true, type: 'select' },
      { prop: 'a3', width: '', label: '三级分类', isRequired: true, type: 'select' },
      { prop: 'a4', width: '', label: '四级分类', isRequired: true, type: 'date' },
      { prop: 'a5', width: '', label: '五级分类', isRequired: true, type: 'input' },
      { prop: 'a6', width: '', label: '六级分类', isTooltip: true, type: 'dialog' },
      { prop: 'a7', width: '', label: '演示级分类', type: 'input' },
      { prop: 'a8', width: '', label: '颜色是分类', type: 'input' },
    ],
    option: [
      { value: '选项1', label: '黄金糕' },
      { value: '选项2', label: '双皮奶' },
      { value: '选项3', label: '蚵仔煎' },
    ],
  },
})

// 表格验证
const onValidate = (formEl: FormInstance | undefined) => {
  if (state.tableData.data.length <= 0) return ElMessage.warning('请先点击增加一行')
  if (!formEl) return
  formEl.validate((valid) => {
    if (!valid) return ElMessage.warning('表格项必填未填')
    ElMessage.success('全部验证通过')
  })
}
// 新增一行
const onAddRow = () => {
  state.tableData.data.push({
    a1: '',
    a2: '',
    a3: '',
    a4: '',
    a5: '',
    a6: '',
    a7: '',
    a8: '',
  })
  tableRef.value.doLayout()
  nextTick(() => {
    tableRef.value.setScrollTop(1000000)
  })
}
</script>
